// import echarts from 'echarts'

export default {
  data () {
    return {
      pieChart: null,
      timer: null
    }
  },
  methods: {
    renderPieChart (data, index = 0) {
      // date: "2020-12-01" paid: 16648 payable: 45548 total: 59593
      const item = data[index]
      var dataPie = [
        {
          name: '已付',
          value: Math.floor((item.paid / item.total) * 100),
          text0: item.paid,
          text1: item.date
        }, {
          name: '未付',
          value: Math.floor((item.payable / item.total) * 100),
          text0: item.payable,
          text1: item.date
        }]
      var titleArr = []; var seriesArr = []; var text = []
      var sCenter; var TitleXy = {}
      var colors = [['#D61D0F', '#E7E7E7'], ['#FF4A1A', '#E7E7E7'], ['#FF800D', '#E7E7E7'], ['#FDC210', '#E7E7E7'], ['#2087ED', '#E7E7E7']]
      dataPie.forEach(function (item, index) {
        if (index < 2) {
          sCenter = [index * 35 + 30 + '%', '40%']
          TitleXy = {
            left: index * 35 + 30 + '%',
            top: '46%'
          }
        }
        titleArr.push(
          {
            text: item.text0,
            left: TitleXy.left,
            top: '28%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'bold',
              fontSize: '20',
              color: colors[index][0],
              textAlign: 'center'
            }
          }
        )
        titleArr.push(
          {
            text: item.text1,
            left: TitleXy.left,
            top: '48%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'bold',
              fontSize: '12',
              color: colors[index][0],
              textAlign: 'center'
            }
          }
        )
        titleArr.push(
          {
            text: item.name,
            left: TitleXy.left,
            top: '38%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'bold',
              fontSize: '16',
              color: colors[index][0],
              textAlign: 'center'
            }
          }
        )
        seriesArr.push(
          {
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [55, 60],
            itemStyle: {
              normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            center: sCenter,
            data: [{
              value: item.value,
              label: {
                normal: {
                  formatter: function (params) {
                    return params.value + '%'
                  },
                  position: 'center',
                  show: false,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    color: colors[index][0]
                  }
                }
              }
            }, {
              value: 100 - item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }]
          }
        )
      })
      const option = {
        backgroundColor: '#fff',
        title: titleArr,
        series: seriesArr
      }
      this.pieChart.setOption(option)

      this.timer = setTimeout(() => {
        // 如果是最后一条数据，就从0开始遍历
        if (index < data.length - 1) {
          this.renderPieChart(data, index + 1)
        } else {
          this.renderPieChart(data, index = 0)
        }
      }, 1500)
    }
  }
}
